<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<%@ include file="../common/taglibs.jsp"%>
		<sx:head/>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
		<link rel="StyleSheet" type="text/css" href="<%=request.getContextPath()%>/pages/css/common.css"></link>
		<title>DFASS</title>
		<script type="text/javascript">
			function showSubCategories4Products() {
		  	  dojo.event.topic.publish("showSubCategories4Products");
			}
		</script>
	</head>
	<body>
		<div class="headerContent" align="center">
			<div class="header">
			<%@ include file="/pages/inc/logged_top.jsp" %>			
			</div>
			<div id="nav_container" align="center">
			<%@ include file="/pages/menu/mb_menu_inventory.jsp" %>
		    </div>
		</div>
		
		<div class="bodyContent" align="center">
			<table><tr><td>&nbsp;</td></tr></table>
			<s:form theme="simple" id="viewProductsForm" action="viewProductsPage">
				<!-- This Empty Table is Required before the content of the body -->
				<table class="tblAdminNormal">
					<thead>
						<tr>
							<td colspan="7" width="800px" >Product details</td>
						</tr>
					</thead>
				</table>		
				<table>
				    <tr>
				        <td>Category</td>
				        <td>
	              	<s:select list="categories" name="cat" id="cat" headerKey="0" headerValue="Select a category"	listKey="id"	listValue="name" onchange="javascript:showSubCategories4Products();return false;" />
	   						</td>
				        <td>Sub Category</td>
				        <td>
	      	      	<s:url id="pri_url" action="showSubCategories4Products" />
		                       	<sx:div id="details" href="%{pri_url}" listenTopics="showSubCategories4Products" 
	                                        formId="viewProductsForm" ></sx:div>
	   					</td>
	   					<td><s:submit value="Search" cssClass="button" /></td>
				    </tr>
				</table>	
				
	 			<table class="userList">
					<thead>
						<tr height="30px">
				            <td width="119">Product Code</td>
				            <td width="164">Product Name</td>
				            <td width="164">Category Code</td>
				            <td width="164">Sub Category Code</td>
				            <td width="121">Description</td>
				            <td width="85">Status</td>
				            <td width="112">Action</td>
			            </tr>
			        </thead>
			        <tbody>
			        	<c:forEach var="product" items="${products}">
					        <tr>
								<td width="119">${product.code}</td>
								<td width="119">${product.name}</td>
								<td width="119">${product.category.code}</td>
					            <td width="121">${product.subCategory.code}</td>
					            <td width="110">${product.description}</td>
					            
					            <c:choose>
						            <c:when test="${product.status == true }">
						            	<td width="85"><input type="text" class="inputLikeLabel" value="Active" readonly="readonly" /></td>
						            </c:when>
						            <c:when test="${product.status == false }">
						            	<td ><input type="text" class="inputLikeLabel" value="Removed" readonly="readonly" /></td>
						            </c:when>
						            <c:otherwise>
						            	<td ><input type="text" class="inputLikeLabel" value="Unknown" readonly="readonly" /></td>
						            </c:otherwise>
					            </c:choose>
	
					            <td width="112" align="center">
					            	<ul class="table_controls">
					                	<li><a href="viewProduct?id=${product.id}" tip="View Product" class="tooltip"><img src="<%=request.getContextPath()%>/pages/images/common/ico_view.png" alt="View Product" /></a></li>
					                    <c:choose>
								            <c:when test="${product.status == true }">
						                    	<li ><a href="editProduct?id=${product.id}"  tip="Edit Product" class="tooltip"><img src="<%=request.getContextPath()%>/pages/images/common/ico_edit.png" alt="Edit Product"  /></a></li>
								            </c:when>
								            <c:otherwise>
						                    	<li><a href="editProduct?id=${product.id}" tip="Edit Product" class="tooltip"><img src="<%=request.getContextPath()%>/pages/images/common/ico_edit.png" alt="Edit Product" /></a></li>
								            </c:otherwise>
					                    </c:choose>
					                    <c:choose>
								            <c:when test="${product.status == false }">
							                    <li><a href="activateProduct?id=${product.id }" tip="Activate Product" onclick="if (!confirm('Are you sure, you want to activate this Product?')) return false" class="tooltip">
							                    		<img src="<%=request.getContextPath()%>/pages/images/common/ico_delete.png" alt="Activate Product" /></a></li>
								            </c:when>
								            <c:otherwise>
							                    <li><a href="deleteProduct?id=${product.id }" tip="Delete Product" onclick="if (!confirm('Are you sure, you want to delete this Product?')) return false" class="tooltip">
							                    		<img src="<%=request.getContextPath()%>/pages/images/common/ico_delete.png" alt="Delete Product" /></a></li>
								            </c:otherwise>
					                    </c:choose>
					                    
			                		</ul>
								</td>
					            
					        </tr>
			        	</c:forEach>
			        </tbody>
				</table>
			</s:form>
		</div>
		
		<div class="footerContent" align="center">
			<div class="footer">
				<%@ include file="/pages/inc/footer.jsp" %>
			</div>
		</div>
	</body>
</html>